<template>
    <div class="organization">
        <div class="header" @click="openPopup">
            <div class="header-content">
                <div class="name">{{priority? priority.name : '未选择'}}</div>
                <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                <span class="iconfont icon2" v-if="show">&#xe669;</span>
            </div>
        </div>
        <popup v-model="show" :show-mask="false" class="popup">
            <div class="main_wrapper" v-if="show">
                <ul id="demo">
                   <li v-for="(item,index) in priorityData" :key="index" class="userList" @click="getSelectData(item)" >
                       <span class="userListContent">{{item.name}}</span>
                    </li>
                </ul>
            </div>
        </popup>
    </div>
</template>
<script>
    import { Popup } from "vux";
    export default {
        name:'organization',
        components:{
            Popup
        },
       
        data: function () {
            return {
                show:false,
                priorityData:[
                    {id:1,name:"新购"},
                    {id:2,name:"维修"},
                    {id:3,name:"更换"}
                ],

                priority:{},
            }
        },
        mounted(){
            this.priority =  {name:"维修",id:2};
            this.$emit("getPriorityData",this.priority);
        },
        methods: {

            // 打开选择器
            openPopup(){
                this.show = true;
            },
            // 单选按钮的点击事件
            getSelectData(data){
                this.show = false;
                this.priority = data;
                this.$emit("getPriorityData",this.priority);
            },
        },
    }
</script>
<style lang="less" scoped>
    @import '../../styles/iconfont.css';
    .organization{
        width: 100%;
        padding-left: 10%;
    }
    .organization .vux-popup-mask{
        display: none !important;
    }
    .main_wrapper{
        color: #fff;
        width: 100%;
        z-index: 999;
        font-size: 16px;
    }
    .header {
      width:100%;
      font-size: 16px;
      line-height: 16px;
      color:#fff;
      padding: 0 !important;
      .header-content {
        padding: 0 !important;
        width:100%;
        display: flex;
        // align-items: center;
        justify-content: right;
        img {
          width: 5px;
          height: 11px;
          margin-left: 15px;
        }
      }
    }
    .iconfont{
        margin-right: 10px;
        font-size: 14px;
    }
    .vux-popup-dialog{
        height: 100vh !important;
        top: 60%;
        bottom: unset!important;
        background: #22233f!important;
        font-size: 14px;
        padding: 0 11px 0 13px;
        box-sizing: border-box;
        background-color: #ffffff !important;
    }
    .name{
        width: 100%;
        // overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
    }
    .icon1{
        margin-left: 5px;
    }
    .icon2{
        margin-left: 5px;
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 
    }
    /********************列表的样式********************/ 
    #demo{
        padding: 0 15px;
        box-sizing: border-box;
        .userList{
            padding: 10px 0;
            color: #000000 !important; 
            .userListContent{
                display: inline-block;
                width: 100%;
                text-align: left;
            }
        }
    }
</style>

